<template>
	<view class="home">
		<view class="user-address-edit-page bg-ff">
			<!-- 页面内容 -->
			<view class="page-content">
				<view class="padding-30">
					<view class="flex align-center">
						<text class="text text-28">联系人</text>
						<input class="margin-left-30 flex-one text-28 bg-f6 height-80 padding-lr-25 radius-10"
							v-model="detail.consignee" type="text" placeholder="请输入" placeholder-class="text-28 text-aa">
					</view>
					<view class="margin-top-30 flex align-center">
						<text class="text text-28">手机号</text>
						<input class="margin-left-30 flex-one text-28 bg-f6 height-80 padding-lr-25 radius-10"
							v-model="detail.mobile" type="number" placeholder="请输入"
							placeholder-class="text-28 text-aa" maxlength="11">
					</view>
					<view class="margin-top-30 flex align-center">
						<text class="text text-28">所在地区</text>
						<view class="flex-one">
							<pickerAddress :code="districtValue" @change="areaChange">
								<view class="item2">
									<!-- <input disabled placeholder="请选择" class="margin-left-30 text-28 bg-f6 height-80 padding-lr-25 radius-10" v-model='city'></input> -->
									<view :class="city?'':'text-aa'" class="margin-left-30 text-28 bg-f6 line-height-80 height-80 padding-lr-25 radius-10">
										{{city?city:'请选择'}}
									</view>
								</view>
							</pickerAddress>
						</view>
					</view>

					<view class="flex margin-top-30">
						<text class="text text-28 "
						>详细地址</text>
						<textarea :value="detail.address" placeholder="街道楼号等"  placeholder-class="text-28 text-aa"
						 style="width: 420rpx;" disabled
						 class="xxadres margin-left-30" @click="location"/>
					</view>

					<view class="line-height-100 flex align-center">
						<text class="text text-28">设为默认</text>
						<view class="margin-left-30">
							<view class="cn-content">
								<view class="radius-25 flex align-center" :class="detail.is_default==1 ? 'bg-main justify-end' : 'bg-ed justify-start'"
									style="width: 100rpx; height: 50rpx;" @click="changeSwitch">
									<view class="radius-50p bg-ff" style="margin:0 1rpx; width: 48rpx; height: 48rpx;"></view>
								</view>
							</view>
						</view>
					</view>
					<!-- 底部条 -->
					<view class="btns width-100p padding-lr-30">
						<view class="line-height-80 radius-40 text-center text-ff text-30 text-bold bg-main"
							@click="submit">
							保存
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue';
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				// 行政规划省市区ID
				districtValue: ['', '', ''],
				// 地址ID
				addressId: '',
				city:'',
				// 我的地址
				detail: {
					address:"",
					lng:"",
					lat:"",
					is_default:1,
					consignee:"",
					mobile:"",
					province_id:"",
					city_id:"",
					district_id:""
				},
				isPersonalRecommend: false,
			}
		},

		onLoad(options) {
			this.addressId = options.id || 0
			if(this.addressId){
				this.rq.getData('address/detail',{id:this.addressId}).then(res=>{
					this.detail = res.data
					this.city = res.data.province_name+'-'+res.data.city_name+'-'+res.data.district_name
				})
			}
		},

		methods: {
			changeSwitch() {
				this.detail.is_default = this.detail.is_default==1?0:1
			},
			/**
			 * 切换默认
			 * @param {Object} e
			 * @date 2023-02-03
			 */
			clickDefault() {
				this.detail.is_default = this.detail.is_default == 0 ? 1 : 0
			},

			/**
			 * 省市区确认
			 * @param {Object} e
			 * @date 2023-02-03
			 */
			areaChange(e) {
				console.log(e)
				this.city = e.data.join('-')
				this.detail.province_id = e.id[0] ? e.id[0] : ''
				this.detail.city_id = e.id[1] ? e.id[1] : ''
				this.detail.district_id = e.id[2] ? e.id[2] : ''
				this.detail.province_name = e.data[0] ? e.data[0] : ''
				this.detail.city_name = e.data[1] ? e.data[1] : ''
				this.detail.district_name = e.data[2] ? e.data[2] : ''
			},
			/**
			 * 定位
			 * @date 2023-02-03
			 */
			location() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.detail.lat = res.latitude
						this.detail.lng = res.longitude
						this.detail.address = res.address + res.name
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},

			/**
			 * 提交地址
			 * @date 2023-02-03
			 */
			submit() {
				if (!this.detail.consignee) {
					uni.showToast({
						title:'请填写联系人~',
						icon:'none'
					})
					return false
				}
				if (!this.detail.mobile) {
					uni.showToast({
						title:'请填写联系方式~',
						icon:'none'
					})
					return false
				}
				if (!this.detail.address) {
					uni.showToast({
						title:'请填写详细地址~',
						icon:'none'
					})
					return false
				}
				if(this.addressId){
					this.detail.id = this.addressId
					this.rq.getData('address/edit',this.detail).then(res=>{
						if (res.code == 1) {
							uni.showToast({
								title:'保存成功',
								icon:'none'
							})
							setTimeout(res => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				}else{
					this.rq.getData('address/add',this.detail).then(res=>{
						if (res.code == 1) {
							uni.showToast({
								title:'保存成功',
								icon:'none'
							})
							setTimeout(res => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				}
			}
		}
	}
</script>
<style>
	.text-aa{
		color: #aaa;
	}
</style>
<style scoped>
	.home {
		padding: 30rpx;
		background: #f6f6f6;
	}

	.text {
		width: 115rpx;
	}

	.btns {
		position: fixed;
		left: 0;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
	}

	.bg-f6 {
		background: #f6f6f6;
	}

	.xxadres {
		width: 496rpx;
		height: 183rpx;
		opacity: 1;
		border-radius: 8rpx;
		background: #F6F6F6;
		padding: 30rpx;
		font-size: 28rpx;
	}
	.padding-30{
		padding: 30rpx;
	}
	.width-100p{
		width: 100%;
		box-sizing: border-box;
	}
	.line-height-80{
		line-height: 80rpx;
	}
	.line-height-100{
		line-height: 100rpx;
	}
	.bg-ff{
		background: #fff;
	}
	.bf-f6{
		background: #F6F6F6;
	}
	.radius-10{
		border-radius: 10rpx;
	}
	.radius-40{
		border-radius: 40rpx;
	}
	.padding-lr-25 {
	    padding-left: 25rpx;
	    padding-right: 25rpx;
	}
	.height-80 {
	    height: 80rpx;
	}
	.margin-top-30{
		margin-top: 30rpx;
	}
	.margin-bottom-15{
		margin-top: 15rpx;
	}
	.margin-bottom-20{
		margin-bottom: 20rpx;
	}
	.margin-left-30 {
	    margin-left: 30rpx;
	}
	.flex{
		display: flex;
	}
	.radius-50p {
	    border-radius: 50%;
	}
	.bg-ed {
	    background-color: #ededed;
	}
	.radius-25 {
	    border-radius: 25rpx;
	}
	.justify-start {
	    justify-content: flex-start;
	}
	.justify-end {
	    justify-content: flex-end;
	}
	.flex-one{
		flex: 1;
	}
	.bg-main{
		background: #FF5866;
	}
	.align-center{
		align-items: center;
	}
	.text-26{
		font-size: 28rpx;
	}
	.text-28{
		font-size: 28rpx;
	}
	.text-30{
		font-size: 30rpx;
	}
	
	.text-b5{
		color: #b5b5b5;
	}
	.text-1a{
		color: #1a1a1a;
	}
	.text-ff{
		color: #ffffff;
	}
	.margin-left-10{
		margin-left: 10rpx;
	}
	.margin-left-20{
		margin-left: 20rpx;
	}
	.text-center{
		text-align: center;
	}
	.padding-lr-30{
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
</style>